<template>
  <el-card shadow="never" body-style="padding: 0;">
    <div class="ele-cell demo-monitor-tool">
      <div class="ele-cell-content">
        <el-tabs
          v-model="saleSearch.type"
          class="demo-monitor-tabs"
          @tab-click="onSaleTypeChange"
        >
          <el-tab-pane label="矩阵管理" name="stationOrder" />
        </el-tabs>
      </div>
      <div>
        <el-radio-group v-model="saleSearch.types" size="small" @change="onSearchTypeChange">
          <el-radio-button :label="1">D音h5</el-radio-button>
          <el-radio-button :label="2">K手</el-radio-button>
          <el-radio-button :label="3">视频号</el-radio-button>
        </el-radio-group>
      </div>
      <div :class="['ele-inline-block', { 'hidden-xs-only': styleResponsive }]" style="margin-left: 20px">
        <el-radio-group v-model="saleSearch.dateType" size="small" @change="onSearchTypeChange">
          <el-radio-button :label="7">近一周</el-radio-button>
          <el-radio-button :label="30">近一月</el-radio-button>
        </el-radio-group>
      </div>
    </div>
    <el-divider />
    <el-row>
      <el-col v-bind="styleResponsive ? { lg: 18, md: 16 } : { span: 18 }" style="margin-top: 30px">
        <div class="demo-monitor-title">
          <span v-if="saleSearch.type === 'reserveOrder'">  </span>
        </div>
        <v-chart
          ref="saleChart"
          style="height: 285px"
          :option="saleChartOption"
        />
      </el-col>
      <!-- 这里放，更新日志-->
      <el-col v-bind="styleResponsive ? { lg: 6, md: 8 } : { span: 6 }">
        <div class="demo-monitor-title" style="display: flex">
          <div>站内信</div>
        </div>
        <!--更新内容-->
        <el-scrollbar
          style="height: 326px;margin: 10px 0 20px"
          wrapStyle="overflow-x: hidden;"
          viewStyle="padding: 14px 10px;"
        >
          <el-timeline :reverse="false" class="ele-timeline ele-timeline-act">
            <el-timeline-item
              v-for="(item, index) in logList"
              :key="index"
              :timestamp="item.timestamp"
              :type="item.type"
            >
              <div class="flex-columns">
                <div class="font12 color000">版本信息：{{item.logVersion}}</div>
                <div class="log-card">
                  <div class="title">{{ item.logName }}</div>

                  <!--富文本内容-->
                  <div class="content" v-html="item.logUpdate"></div>
                </div>
                <div v-if="item.releaseTime">更新时间：{{item.releaseTime}}</div>
              </div>
            </el-timeline-item>
          </el-timeline>
        </el-scrollbar>
      </el-col>
    </el-row>
  </el-card>
</template>

<script>
  import { use } from 'echarts/core';
  import { CanvasRenderer } from 'echarts/renderers';
  import { LineChart,BarChart,PieChart  } from 'echarts/charts';
  import {
    GridComponent,
    TooltipComponent,
    LegendComponent
  } from 'echarts/components';
  import VChart from 'vue-echarts';
  import { echartsMixin } from '@/utils/echarts-mixin';
  import {getNotice} from "@/api/layout";
  import {getMerchantCount} from "@/api/dashboard/workplace";
  use([
    CanvasRenderer,
    LineChart,
    BarChart,
    PieChart,
    GridComponent,
    TooltipComponent,
    LegendComponent
  ]);


  use([CanvasRenderer, BarChart, GridComponent, TooltipComponent]);

  export default {
    components: { VChart },
    mixins: [echartsMixin(['saleChart'])],
    data() {
      return {
        // 销售量搜索参数
        saleSearch: {
          type: 'reserveOrder',
          dateType: 7,
          types:1,
          datetime: ''
        },
        // 回收订单趋势数据
        saleroomData1: [],
        // 回收站订单趋势数据
        saleroomData2: [],
        // 打包站订单趋势数据
        saleroomData3: [],
        // 访问量趋势数据
        saleDate: [],
        // 门店排名数据
        saleroomRankData: [],
        saleRankData1:[],
        saleRankData2:[],
        saleRankData3:[],
        // 销售额柱状图配置
        saleChartOption: {},
        logList:[]
      };
    },
    computed: {
      // 是否开启响应式布局
      styleResponsive() {
        return this.$store.state.theme.styleResponsive;
      }
    },
    created() {
      this.getSaleroomData();
      this.updateLog();
    },
    methods: {
      // 更新日志（新增）
      updateLog(){
        // 查询日志
        let parms={}
        getNotice(parms)
          .then((data) => {
            this.logList=data
            console.log('查询通知信息数据+++++++++++++',data)
          })
          .catch((e) => {
            this.$message.error(e.msg);
          });
      },
      /* 搜索 */
      search() {
        this.getSaleroomData();
      },
      /*  重置 */
      reset() {
        this.saleSearch.datetime = [];
        this.search();
      },
      onSearchTypeChange(){
        this.saleSearch.datetime = [];
        this.getSaleroomData();
      },
      /* 获取销售量数据 */
      getSaleroomData() {
        let datyType = this.saleSearch.dateType;
        getMerchantCount(datyType,this.$store.state.user.info.merchantId,this.saleSearch.types)
          .then((data) => {
            console.log('data======',data)
            // oem名称是代理的数据查询 merchant名称商家的数据查询 equipment名称设置的数据查询 merchantType名称套餐类型的数据查询
            var merchant = data.merchantMatrix.map(item => {
              return item.count
            })
            this.saleDate = data.date;
            this.saleroomData2 = merchant;
            this.onSaleTypeChange();
            console.log('this.saleroomData1',this.saleroomData1,'222',this.saleroomData2,'333',this.saleroomData3,'444',this.saleroomData4)
          })
          .catch((e) => {
            this.$message.error(e.message);
          });
      },

      /* 销售量tab选择改变事件 */
      onSaleTypeChange() {
        let name = ''   // 折线图 线名称
        let data = [];  // 折线图 count数据集合
        if(this.saleSearch.type === 'stationOrder'){
          data = this.saleroomData2; //代理数量
        }
        this.saleChartOption = {
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: [name],
            right: 20
          },
          xAxis: [
            {
              type: 'category',
              boundaryGap: false,
              data: this.saleDate
            }
          ],
          yAxis: [
            {
              type: 'value'
            }
          ],
          series: [
            {
              name: 'name',
              type: 'line',
              smooth: true,
              symbol: 'none',
              areaStyle: {
                opacity: 0.5
              },
              data: data
            }
          ]
        };
      }
    }
  };
</script>

<style lang="scss" scoped>
  /* 销售额、访问量工具栏 */
  .demo-monitor-tool {
    padding: 5px 20px;

    .demo-monitor-tabs {
      height: 51px;
    }

    :deep(.el-tabs__item) {
      height: 51px;
      line-height: 51px;
      font-size: 15px;
    }

    :deep(.el-tabs__nav-wrap:after) {
      display: none;
    }
  }

  /* 小标题 */
  .demo-monitor-title {
    padding: 0 20px;
    margin: 15px 0 5px 0;
  }

  /* 排名 item */
  .demo-monitor-rank-item {
    padding: 0 20px;
    line-height: 20px;
    margin-top: 18px;
  }
/*  更新日志*/

  .log-card{
    margin: 10px 0;
    flex:1;
    /* box-shadow: 5px 5px 3px 4px rgba(0, 0, 0, .4);  */
    /* box-shadow:水平位置 垂直位置 模糊距离 阴影尺寸（影子大小） 阴影颜色  内/外阴影； */
    box-shadow: 0 15px 30px  #F6F6F6;
    border-radius: 10px;
    overflow: hidden;
    .title{
      width: 100%;
      color: #3094FE;
      background-color: #F3F3F3;
      font-size: 16px;
      font-weight: bold;
      padding: 15px 10px;
    }
    .content{
      width: auto !important;
      background-color: #fff;
      padding: 10px;
      color: #86919D;
    }
  }
</style>
